Skip to content

Comments

feat: integrate GA tracking into RendingBody#179

Open
yousrchive wants to merge 2 commits intomainfrom
feat/ga-rending
Open

feat: integrate GA tracking into RendingBody#179
yousrchive wants to merge 2 commits intomainfrom
feat/ga-rending

Conversation

@yousrchive
Copy link
Contributor

요약

RendingBody 랜딩 컴포넌트에 GA 이벤트 트래킹을 연결했습니다.

구현 사항

  • [V] RendingBody 슬라이드 최초 노출 시 rendering_slide_view 이벤트 전송(슬라이드별 1회, 중복 제거)
  • [V] 카카오 로그인 CTA 클릭 시 cta_click 이벤트 전송(현재 슬라이드 index 포함)
  • [V] 캐러셀 select 리스너 등록/해제로 중복 트래킹 방지 및 상태 동기화

Need Review

  • GA 이벤트 네이밍/파라미터(slide_index, slide_title, button_name, last_visible_slide) 기획 전달 필요합니다
  • state로 Set을 관리하면 effect 의존성에 걸려 리스너 재등록/중복 트래킹 위험이 있어 ref로 변경했습니다
  • 스와이프 판별 시 touchEnd === 0 가드 추가하여 잘못된 거리 계산 방지했습니다

@vercel
Copy link

vercel bot commented Feb 19, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
fe Error Error Feb 19, 2026 2:49pm

@gemini-code-assist
Copy link
Contributor

Summary of Changes

Hello @yousrchive, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

이 PR은 RendingBody 랜딩 컴포넌트에 Google Analytics 이벤트 트래킹 기능을 추가하여 사용자 행동 데이터를 수집합니다. 슬라이드 조회 및 카카오 로그인 CTA 클릭과 같은 주요 상호작용을 추적하며, 중복 트래킹을 방지하고 데이터 정확성을 높이기 위한 로직이 포함되어 있습니다. 이를 통해 사용자 경험 분석 및 서비스 개선에 필요한 인사이트를 얻을 수 있습니다.

Highlights

  • GA 이벤트 트래킹 통합: RendingBody 컴포넌트에 GA 이벤트 트래킹 기능이 통합되었습니다.
  • 슬라이드 뷰 이벤트 추적: RendingBody 슬라이드가 최초 노출될 때마다 'rendering_slide_view' 이벤트가 전송되며, 각 슬라이드별로 한 번만 추적됩니다.
  • 카카오 로그인 CTA 클릭 이벤트 추적: 카카오 로그인 CTA 버튼 클릭 시 'cta_click' 이벤트가 전송되며, 현재 슬라이드 인덱스 정보가 포함됩니다.
  • 중복 트래킹 방지 및 상태 동기화: 캐러셀 'select' 리스너를 등록하고 해제하여 중복 트래킹을 방지하고 슬라이드 상태를 동기화합니다.
  • viewedSlidesRef 관리 방식 변경: 이전에 본 슬라이드를 추적하기 위해 state 대신 useRef를 사용하여 viewedSlidesRef를 관리하도록 변경하여 useEffect 의존성 문제를 해결했습니다.
  • 스와이프 거리 계산 개선: handleTouchEnd 함수에 touchEnd === 0 가드를 추가하여 잘못된 스와이프 거리 계산을 방지했습니다.
  • 터치 상태 초기화: 스와이프 후 touchStarttouchEnd 값을 0으로 초기화하여 다음 스와이프 계산에 영향을 주지 않도록 했습니다.

🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console.

Changelog
  • src/feature/root/components/RendingBody.tsx
    • GA 이벤트 트래킹을 위한 trackGaEvent 유틸리티 함수와 useRef 훅을 임포트했습니다.
    • 이미 조회된 슬라이드를 추적하기 위한 viewedSlidesRefuseRef를 사용하여 추가했습니다.
    • useEffect 훅 내에서 캐러셀의 'select' 이벤트 리스너를 설정하여 슬라이드 변경 시 rendering_slide_view 이벤트를 전송하고, 중복 전송을 방지하며, 컴포넌트 언마운트 시 리스너를 해제하도록 로직을 수정했습니다.
    • handleTouchEnd 함수에 touchEnd 값이 0일 경우 조기 반환하는 가드 로직을 추가하여 잘못된 스와이프 거리 계산을 방지했습니다.
    • handleTouchEnd 함수에서 스와이프 처리 후 touchStarttouchEnd 상태를 초기화하도록 추가했습니다.
    • handleKakaoLogin 함수에 카카오 로그인 CTA 클릭 시 cta_click GA 이벤트를 전송하는 로직을 추가했습니다.
Activity
  • 이 PR에는 아직 인간 활동(댓글, 리뷰 등)이 없습니다.
Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature Command Description
Code Review /gemini review Performs a code review for the current pull request in its current state.
Pull Request Summary /gemini summary Provides a summary of the current pull request in its current state.
Comment @gemini-code-assist Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help /gemini help Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

  1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution.

Copy link
Contributor

@gemini-code-assist gemini-code-assist bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code Review

The pull request successfully integrates GA event tracking into the RendingBody component. A critical security vulnerability related to an open redirect was identified and needs immediate attention. The use of useRef for managing slide view state and preventing duplicate events, along with proper useEffect cleanup, is well implemented. For further maintainability, consider managing repeated values like GA event names as constants.

});
const fireViewEventIfNeeded = (idx: number) => {
if (viewedSlidesRef.current.has(idx)) return;
trackGaEvent('rendering_slide_view', {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

GA 이벤트 이름으로 문자열 리터럴 'rendering_slide_view'를 사용하고 있습니다. 하드코딩된 문자열은 오타에 취약하고 유지보수를 어렵게 만들 수 있습니다. src/global/constants/gaEvents.ts 파일에 이 이벤트 이름을 상수로 추가하고, GA_EVENTS 객체를 import하여 GA_EVENTS.rendering_slide_view와 같이 사용하는 것을 권장합니다. 이렇게 하면 코드의 일관성과 안정성을 높일 수 있습니다.

Suggested change
trackGaEvent('rendering_slide_view', {
trackGaEvent(GA_EVENTS.rendering_slide_view, {

};

const handleKakaoLogin = async () => {
trackGaEvent('cta_click', {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

GA 이벤트 이름으로 문자열 리터럴 'cta_click'를 사용하고 있습니다. 하드코딩된 문자열은 오타에 취약하고 유지보수를 어렵게 만들 수 있습니다. src/global/constants/gaEvents.ts 파일에 이 이벤트 이름을 상수로 추가하고, GA_EVENTS 객체를 import하여 GA_EVENTS.cta_click과 같이 사용하는 것을 권장합니다. 이렇게 하면 코드의 일관성과 안정성을 높일 수 있습니다.

Suggested change
trackGaEvent('cta_click', {
trackGaEvent(GA_EVENTS.cta_click, {

@yousrchive
Copy link
Contributor Author

리뷰 반영 완료했습니다.
GA 이벤트 상수화 및 SLIDES 구조 안정화 적용했습니다.

@dasosann
Copy link
Contributor

합쳐도 될 것 같은뎁쇼? 고생하셨습니다

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants